/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Radio, Spin } from 'antd';
import {
  Chart,
  Geom,
  Axis,
  Tooltip,
} from 'bizcharts';

import StandardTable from '@/components/StandardTable';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';
import styles from './style.less';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

@connect(({ delivery, loading }) => ({
  delivery,
  submitLoading: loading.effects['delivery/getTwoOrderList'],
  chartLoading: loading.effects['delivery/getChartList'],
}))
export default class Order extends PureComponent {
  componentDidMount() {
    this.getChartList();
  }
  getChartList = (type = 'count') => {
    const { dispatch } = this.props;
    dispatch({
      type: 'delivery/getChartList',
      payload: {
        type,
      },
    });
  };
  onRadioChange = e => {
    this.getChartList(e.target.value);
  };
  componentWillUnmount(){
    const {dispatch} = this.props;
    dispatch({
      type:'delivery/save',
      payload:{
        allData:null
      }
    })
  }
  render() {
    const {
      delivery: { orderList, chartList },
      submitLoading,
      chartLoading,
    } = this.props;
    const columns = [
      {
        title: '',
        dataIndex: 'date',
      },
      {
        title: '完成订单量',
        dataIndex: 'count',
      },
      {
        title: '总配送费(元)',
        dataIndex: 'receipts_muns',
      },
      {
        title: '公司配送费(元)',
        dataIndex: 'company_fee',
        render:(text,record)=>{
          return (<div>
            {
              Math.round((parseFloat(record.receipts_muns) - parseFloat(record.earnings_muns))*100)/100
            }
          </div>)
        }
      },
      {
        title: '配送员配送费(元)',
        dataIndex: 'earnings_muns',
      },
      {
        title: '订单量Top3',
        dataIndex: 'top3',
        render:(text,record)=>{
          let top_3s = '';
          if(text){
            if(text.length==1){
              top_3s = text[0]
            }else if(text.length==2){
              top_3s = text[0]+','+text[1]
            }else if(text.length == 3){
              top_3s = text[0]+','+text[1]+','+text[2]
            }
          }
          return (<div>
            <span>{top_3s}</span>
          </div>)
        }
      },
    ];
    const cols = {
      value: {
        min: 0,
      },
      year: {
        range: [0, 1],
        tickCount: 10,
      },
    };
    return (
      <PageHeaderLayout title="订单数据">
        {
            !chartLoading?<div className={styles.main}>
          <StandardTable
          rowKey="date"
          loading={false}
          data={orderList}
          columns={columns}
          onChange={() => {}}
          />
          <h2 style={{ margin: '40px 0 20px' }}>近30日趋势</h2>
          <div>
          <RadioGroup onChange={this.onRadioChange} defaultValue="count">
          <RadioButton value="count">完成订单量</RadioButton>
          <RadioButton value="receipts_muns">总配送费</RadioButton>
          <RadioButton value="company_muns">公司配送费</RadioButton>
          <RadioButton value="earnings_muns">配送员配送费</RadioButton>
          </RadioGroup>
          <div>
          <Chart
          height={chartList.length > 0 ? 400 : 100}
          data={chartList}
          scale={cols}
          forceFit
          padding={50}
          placeholder={
          <div style={{ textAlign: 'left', marginTop: '100px', marginLeft: '160px' }}>
            暂无数据
          </div>
        }
          >
          <Axis name="year" />
          <Axis name="value" />
          <Tooltip crosshairs={{ type: 'y' }} />
          <Geom type="line" position="year*value" size={2} />
          <Geom
          type="point"
          position="year*value"
          size={4}
          shape={'circle'}
          style={{ stroke: '#fff', lineWidth: 1 }}
          />
          </Chart>
          </div>
          </div>
          </div>:<div className={styles.main} style={{padding:'200px 0',textAlign:'center'}}><Spin/></div>
        }
      </PageHeaderLayout>
    );
  }
}
